<template>
<div>
  <head title="Invite friends"></head>
  <list>
    <cell>
      <div class="pagesize">
        <image class="bgImg" src="root:img/invite/bg.png" />
      </div>

      <div class="content">
        <div class="cards">
          <div class="cardItem" @click="push('root:app/invite/userlist.js')">
            <text class="cardNum">{{num}}</text>
            <text class="cardTit">Invited friends</text>
          </div>
          <div class="cardItem" @click="push('root:app/invite/reveie.js')">
            <text class="cardNum">{{reward}}</text>
            <text class="cardTit">Rewards earned</text>
          </div>
        </div>
        <text
          class="tipsc"
        >Notice：Your friend must have never registered GIV before. You invited friends would be registered under your account, and you will receive rewards on every order they placed.</text>

        <text class="buttons" @click="push('root:app/invite/qcode.js')">Invite friends now</text>

        <div class="navBar">
          <image class="iconImg" src="root:img/invite/slid.png" />
          <text class="natTxt">3 steps to invite friends</text>
          <image class="iconImg" src="root:img/invite/slid.png" />
        </div>
        <image class="invitWay" src="root:img/invite/nav.png" />

        <div class="navBar">
          <image class="iconImg" src="root:img/invite/slid.png" />
          <text class="natTxt">Rules</text>
          <image class="iconImg" src="root:img/invite/slid.png" />
        </div>
        <div class="rules"></div>
      </div>
    </cell>
  </list>
</div>
</template>

<script>
import { get_qrcode, get_promote_info } from "../../mixin/ajax";
import asCore from "../../mixin/core";
export default {
  data() {
    return {
      id: 1,
      qrcode: "",
      nickname: "sishhshs", //昵称
      mobile: 12321312, //手机号
      num: 0, //好友数量
      reward: "0.00" //奖励金额
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.getPageData(userId);
    });
  },
  methods: {
    getPageData(users_id) {
      get_qrcode({ users_id: users_id }, (res, flag) => {
        if (flag && res.code == 200) {
          this.qrcode = res.data.qrcode_bill;

          var pref = weex.requireModule("storage");
          pref.setItem("userQC", res.data.qrcode_bill);
        }
      });
      get_promote_info({ users_id: users_id }, (res, flag) => {
        if (flag && res.code == 200) {
          if (res.data) {
            this.num = res.data.num;
            this.reward = res.data.reward;
            var pref = weex.requireModule("storage");

            pref.setItem("rewardTotal", res.data.reward);
          }
        }
      });
    }
  }
};
</script>

<style>
.pagesize {
  width: 750px;
  height: 2136px;
  position: relative;
}
.bgImg {
  width: 750px;
  height: 2136px;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.cards {
  width: 686px;
  height: 188px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1),
    rgba(253, 198, 137, 1)
  );
  margin-left: 32px;
  margin-top: 628px;
  border-radius: 24px;
  border: 1px solid rgba(151, 151, 151, 1);
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
.cardItem {
  flex: 1;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
}
.cardItem:active {
  background-color: rgba(255, 255, 255, 1);
}
.cardNum {
  font-size: 40px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(199, 0, 0, 1);
  line-height: 56px;
}
.cardTit {
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(156, 80, 11, 1);
  line-height: 40px;
  margin-top: 16px;
}
.tipsc {
  width: 686px;
  height: 117px;
  margin-left: 32px;
  font-size: 22px;
  font-family: Helvetica;
  color: rgba(255, 255, 255, 1);
  line-height: 39px;
  text-align: center;
  margin-top: 10px;
}
.buttons {
  width: 584px;
  height: 112px;

  border-radius: 69px;
  margin-top: 66px;
  margin-left: 83px;
  color: #fff;
  line-height: 112px;
  text-align: center;
  font-size: 34px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;

  background-color: rgba(255, 193, 50, 1);
}
.buttons:active {
  background-color: rgba(255, 193, 50, 1);
  background-image: rgba(255, 193, 50, 1);
  box-shadow: 0px 10px 0px 0px rgba(255, 193, 50, 1);
}
.navBar {
  flex-direction: row;
  width: 500px;
  margin-left: 125px;
  margin-top: 60px;
  margin-bottom: 50px;
  justify-content: center;
}
.iconImg {
  width: 50px;
  height: 50px;
}
.natTxt {
  height: 30px;
  font-size: 30px;
  font-family: Helvetica;
  color: rgba(255, 255, 255, 1);
  line-height: 36px;
  margin-left: 20px;
}
.invitWay {
  width: 684px;
  height: 271px;
  margin-left: 33px;
}
.rules {
  width: 684px;
  height: 374px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16px;
  margin-left: 33px;
}
</style>